<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <!-- <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入用户名,如:刘德华" v-model="listQuery.keyword"> </el-input>
    <el-button class="filter-item" type="primary"  icon="search" @click="handleFilter">搜索</el-button> -->
    <el-form >
        <el-form-item label="申请状态" style="width:48%;float:left">
          <el-select class="filter-item" v-model="listQuery.status" @change="statusChange">
              <el-option v-for="item in  options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item> 
    </el-form>
  </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
    <el-table-column align="center" label="编号" width="65"> <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template> </el-table-column>
    <el-table-column align="center" label="批次号" width="200"> <template scope="scope">
          <span>{{scope.row.batchNo}}</span>
        </template> </el-table-column>    
    <el-table-column width="200" align="center" label="姓名"> <template scope="scope">
        <span>{{scope.row.name}}</span>
      </template> </el-table-column>
    <el-table-column width="200" align="center" label="放款金额(元)"> <template scope="scope">
            <span>{{scope.row.amount}}</span>
          </template> </el-table-column>
    <el-table-column width="200" align="center" label="放款账号"> <template scope="scope">
            <span>{{scope.row.acctNo}}</span>
          </template> </el-table-column>
    <el-table-column width="100" align="center" label="订单数"> <template scope="scope">
            <span>{{scope.row.demandCnt}}</span>
          </template> </el-table-column>
    <el-table-column width="200" align="center" label="申请时间"> <template scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template> </el-table-column>    
    <el-table-column width="180" align="center" label="申请状态"> <template scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">待处理</el-tag>
          <el-tag v-if="scope.row.status == 1" >已批复</el-tag>
          <el-tag v-if="scope.row.status == 2" type="info">已拒绝</el-tag>
        </template> </el-table-column>
    <el-table-column align="center" label="操作" width="150" fixed="right"> <template scope="scope">
        <el-button size="small" type="primary" @click="approveAction(scope.row)"   v-if="scope.row.status == '0'">通过</el-button>
        <el-button size="small" type="danger" @click="refuseAction(scope.row)"   v-if="scope.row.status == '0'">拒绝</el-button>
      </template> </el-table-column>    
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"  :total="total"> </el-pagination>
  </div>
  
</div>
</template>

<script>
import { list, addOrUpdate, addShopBalance } from "@/api/balance/index";
import { withdrawApplyList, approveWithdraw,refuseWithdraw } from "@/api/shop/index";

import { mapGetters } from "vuex";
export default {
  name: "user",
  data() {
    return {
      options: [
        {
          name: "全部",
          id: undefined
        },
        {
          name: "待处理",
          id: 0
        },
        {
          name: "已批复",
          id: 1
        },
        {
          name: "已拒绝",
          id: 2
        }
      ],
      operateType: "P",
      shopDispatchParam: {
        q: "",
        longtitude: 0.0,
        latitude: 0.0
      },
      dispatchParam: {
        demandId: undefined,
        shopId: undefined
      },
      dipatchShopDialogVisible: false,
      dispatchShopList: [],
      currentRow: null,
      province: "",
      city: "",
      area: "",
      street: "",
      form: {
        dtlAddress: "",
        province: "",
        phone: "",
        name: "",
        sex: "男",
        password: "123456",
        description: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur"
          }
        ]
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        type: "1,2,3,4,5,6,7,8,9,10,11",
        pageNo: 1,
        pageSize: 20,
        keyword: undefined
      },
      sexOptions: ["男", "女"],
      dialogFormVisible: false,
      dialogStatus: "",
      userManager_btn_edit: true,
      userManager_btn_del: true,
      userManager_btn_add: true,
      textMap: {
        update: "编辑",
        create: "创建"
      },
      tableKey: 0,
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: []
    };
  },
  mounted() {},
  created() {
    this.getList();
    this.userManager_btn_edit = true; //this.elements["userManager:btn_edit"];
    this.userManager_btn_del = true; //this.elements["userManager:btn_del"];
    this.userManager_btn_add = true; //this.elements["userManager:btn_add"];
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    refuseAction(row) {
      this.$confirm("确认拒绝批次【"+row.batchNo+"】的提现请求么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        refuseWithdraw(row.id).then((resp) => {
          this.$notify({
            title: "成功",
            message: resp.message,
            type: "success",
            duration: 2000
          });
          this.getList()
        });
      });
    },
    approveAction(row) {
      this.$confirm("确认批复批次【"+row.batchNo+"】的提现请求么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        approveWithdraw(row.id).then((resp) => {
          this.$notify({
            title: "成功",
            message: resp.message,
            type: "success",
            duration: 2000
          });
          this.getList()
          
        });
      });
    },
    submit(item) {
      var param = {
        title: item.operateType === "P" ? "放款" : "冲账",
        payWay: item.payWay,
        account: item.account,
        operateType: item.operateType,
        money: item.money,
        demandId: item.id,
        itemId: "",
        shopId: item.shopId,
        remark: item.opRemark
      };
      addShopBalance(param).then(resp => {
        this.getList();
      });
    },
    onOrderItemClick(row, event, column) {
      if (row.status == 0) {
        return;
      }
      this.$router.push({
        name: "order_item",
        query: {
          id: row.id
        }
      });
    },
    /**
     * 分配操作
     */
    dispatchClick() {},

    onShopDispatchSelected(val) {
      this.currentRow = val;
      this.dispatchParam.shopId = val.id;
    },
    statusChange(){
      this.listQuery.pageNo = 1;
      this.getList();
    },
    change() {
      console.log(this.province);
    },
    handleFrom(item) {
      return item.from == 0 ? "平台录入" : "用户注册";
    },
    getList() {
      withdrawApplyList(this.listQuery).then(response => {
        var list = response.data.records;
        //开始处理冲账操作
        list.forEach(element => {
          element.operateType = "P";
        });
        this.list = list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getList();
    },
    onItemDispatchShop(row) {
      this.dispatchParam.demandId = row.id;
      this.shopDispatchParam.latitude = row.latitude;
      this.shopDispatchParam.longtitude = row.longtitude;
      this.shopDispatchParam.q = "";
      this.currentRow = null;
      this.dipatchShopDialogVisible = !this.dipatchShopDialogVisible;
      this.shopSearchClick();
    },
    shopSearchClick() {
      shopSearchForDispatch(this.shopDispatchParam)
        .then(resp => {
          if (resp.status == 200) {
            this.dispatchShopList = resp.data;
          } else {
            this.dispatchShopList = [];
          }
        })
        .catch(v => {
          this.dispatchShopList = [];
        });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    },
    create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          addOrUpdate(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form.id, this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    resetTemp() {
      this.form = {
        phone: undefined,
        name: undefined,
        sex: "男",
        password: undefined,
        description: undefined
      };
    }
  }
};
</script>
